<!-- Adapted from https://tailwindui.com/components/marketing/sections/heroes -->
<div class="relative bg-white overflow-hidden">
  <div class="max-w-7xl mx-auto">
    <div
      class="relative z-10 pb-8 bg-white 0:pb-16 1:pb-20 2:max-w-2xl 2:w-full 2:pb-28 3:pb-32"
    >
      <div>
        <div class="relative pt-6 px-4 0:px-6 2:px-8">
          <nav
            class="relative flex items-center justify-between 0:h-10 2:justify-start"
            aria-label="Global"
          >
            <div
              class="flex items-center flex-grow flex-shrink-0 2:flex-grow-0"
            >
              <div class="flex items-center justify-between w-full 1:w-auto">
                <a href="#">
                  <span class="sr-only">Workflow</span>
                  <img
                    class="h-8 w-auto 0:h-10"
                    src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
                  />
                </a>
                <div class="-mr-2 flex items-center 1:hidden">
                  <button
                    type="button"
                    class="bg-white rounded-md p-2 inline-flex items-center justify-center text-secondary hover:text-muted hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary"
                    aria-expanded="false"
                  >
                    <span class="sr-only">Open main menu</span>
                    <!-- Heroicon name: outline/menu -->
                    <svg
                      class="h-6 w-6"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      aria-hidden="true"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M4 6h16M4 12h16M4 18h16"
                      />
                    </svg>
                  </button>
                </div>
              </div>
            </div>
            <div class="hidden 1:block 1:ml-10 1:pr-4 1:space-x-8">
              <a href="#" class="font-heading text-muted hover:text-gray-900"
                >Product</a
              >

              <a href="#" class="font-heading text-muted hover:text-gray-900"
                >Features</a
              >

              <a href="#" class="font-heading text-muted hover:text-gray-900"
                >Marketplace</a
              >

              <a href="#" class="font-heading text-muted hover:text-gray-900"
                >Company</a
              >

              <a href="#" class="font-heading text-primary hover:text-secondary"
                >Log in</a
              >
            </div>
          </nav>
        </div>

        <!--
          Mobile menu, show/hide based on menu open state.

          Entering: "duration-150 ease-out"
            From: "opacity-0 scale-95"
            To: "opacity-100 scale-100"
          Leaving: "duration-100 ease-in"
            From: "opacity-100 scale-100"
            To: "opacity-0 scale-95"
        -->
        <div
          class="absolute z-10 top-0 inset-x-0 p-2 transition transform origin-top-right 1:hidden"
        >
          <div
            class="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden"
          >
            <div class="px-5 pt-4 flex items-center justify-between">
              <div>
                <img
                  class="h-8 w-auto"
                  src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
                  alt=""
                />
              </div>
              <div class="-mr-2">
                <button
                  type="button"
                  class="bg-white rounded-md p-2 inline-flex items-center justify-center text-secondary hover:text-muted hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary"
                >
                  <span class="sr-only">Close main menu</span>
                  <!-- Heroicon name: outline/x -->
                  <svg
                    class="h-6 w-6"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    aria-hidden="true"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M6 18L18 6M6 6l12 12"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <div class="px-2 pt-2 pb-3 space-y-1">
              <a
                href="#"
                class="block px-3 py-2 rounded-md text-base font-heading text-gray-700 hover:text-gray-900 hover:bg-gray-50"
                >Product</a
              >

              <a
                href="#"
                class="block px-3 py-2 rounded-md text-base font-heading text-gray-700 hover:text-gray-900 hover:bg-gray-50"
                >Features</a
              >

              <a
                href="#"
                class="block px-3 py-2 rounded-md text-base font-heading text-gray-700 hover:text-gray-900 hover:bg-gray-50"
                >Marketplace</a
              >

              <a
                href="#"
                class="block px-3 py-2 rounded-md text-base font-heading text-gray-700 hover:text-gray-900 hover:bg-gray-50"
                >Company</a
              >
            </div>
            <a
              href="#"
              class="block w-full px-5 py-3 text-center font-heading text-primary bg-gray-50 hover:bg-gray-100"
            >
              Log in
            </a>
          </div>
        </div>
      </div>

      <main
        class="mt-10 mx-auto max-w-7xl px-4 0:mt-12 0:px-6 1:mt-16 2:mt-20 2:px-8 3:mt-28"
      >
        <div class="1:text-center 0:text-left">
          <h1
            class="text-4xl tracking-0 font-heading text-gray-900 0:text-5xl 1:text-6xl"
          >
            <span class="block 3:inline">Data to enrich your</span>
            <span class="block text-primary 3:inline">online business</span>
          </h1>
          <p
            class="mt-3 text-base text-muted 0:mt-5 0:text-lg 0:max-w-xl 0:mx-auto 1:mt-5 1:text-xl 2:mx-0"
          >
            Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui
            lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat
            fugiat aliqua.
          </p>
          <div class="mt-5 0:mt-8 0:flex 0:justify-center 2:justify-start">
            <div class="rounded-md shadow">
              <a
                href="#"
                class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-heading rounded-md text-white bg-primary hover:bg-indigo-700 1:py-4 1:text-lg 1:px-10"
              >
                Get started
              </a>
            </div>
            <div class="mt-3 0:mt-0 0:ml-3">
              <a
                href="#"
                class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-heading rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 1:py-4 1:text-lg 1:px-10"
              >
                Live demo
              </a>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</div>
